.header-channel {
    width: 100%;
    padding-top: 24px;
    padding: 20px 140px 0px 140px;
    display: flex;

    .header-channel-left {
        display: flex;

        .channel-left-item {
            margin-right: 24px;

            .channel-left-icon {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .icon {
                width: 29px;
                height: 29px;
            }

        }

        .channel-left-item-title {
            margin-top: 6px;
            text-align: center;
            font-size: 14px;
            line-height: 20px;
        }

        .bg-orange {
            background-color: #ff9212;
        }

        .bg-pink {
            background-color: #f07775;
        }

        .bg-green {
            background-color: #59ca73;
        }
    }

    .header-channel-right {
        display: flex;
        width: 100%;

        .channel-right-box-left {
            padding-right: 30px;
            display: grid;
            width: 100%;
            grid-auto-flow: column;
            grid-column: span 4;
            grid-gap: 10px;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(12, 1fr);
            border-right: 1px solid #E3E5E7;

            .right-box-left-item {
                font-size: 14px;
                font-weight: 100;
                display: inline-block;
                box-sizing: content-box;
                width: 100%;
                min-width: 3rem;
                height: 32px;
                line-height: 32px;
                border: 1px solid #F1F2F3;
                border-radius: 6px;
                background-color: #F6F7F8;
                color: #61666D;
                text-align: center;
                font-weight: 400;
                transition: background-color .3s, color .3s;
            }
        }

        .channel-right-box-right {
            padding-left: 20px;
            display: grid;
            width: 20%;
            grid-auto-flow: column;
            grid-column: span 4;
            grid-gap: 10px;
            grid-template-rows: repeat(2, 1fr);

            .right-box-right-item {
                font-size: 14px;
                color: #61666D;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    width: 20px;
                    height: 20px;
                }

                .channel-text {
                    white-space: pre;
                }
            }
        }
    }
}